<template>
  <div class="bgm min-h-screen bg-repeat-y bg-cover">
    <img class="w-full p-3" :src="imgUrl" alt="">
    <div v-for="chapter in chapters">
      <ChapterTitle :title="'第'+chapter.orderNum+'章 '+ chapter.chapterName"/>
      <div class="chapter_content whitespace-pre-wrap break-words px-3">
        {{ chapter.content }}
      </div>
    </div>

    <div class="p-5 pl-25 pr-25 text-red-700 text-lg" @click="toDeepLink">
      <div>由於篇幅有限，只能更新到這裏啦！後續精彩內容</div>
      <div>請點擊下方↓↓↓【下載】閱讀全文↓↓↓</div>
      可以搜索”<span class="font-bold">{{ novelId }}（書號）</span>“繼續閱讀。
    </div>
    <div class="flex justify-center p-5 pl-25 pr-25" @click="toDeepLink">
      <div class="flex flex-row">
        <div class="bg-gradient-to-t from-gray-400 via-gray-200 to-gray-400 rounded-full py-3 px-6">
          <img class="inline pr-2" src="./assets/images/download.png" alt="">
          <span class="" style="color: #95805A;font-weight: bold">點擊下載免費閱讀全部內容</span>
        </div>
      </div>
    </div>
  </div>
</template>

<style>
</style>

<script lang="ts">
import {defineComponent, ref} from 'vue';
import ChapterTitle from '/@/components/ChapterTitle.vue';
import service from "./utils/http/request";

export default defineComponent({
  name: 'App',
  components: {ChapterTitle},
  setup() {
    let href = location.href;
    let split = href.split("?");
    let strings = split[0].split('/');
    let length = strings.length;
    const adId = strings[length - 1];
    const chapters = ref();
    const imgUrl = ref();
    const deepLink = ref();
    const novelId = ref();
    let params = split.length > 1 ? '?' + split[1] : ''
    // 此处可以得到用户ID
    service.get("/api/v1/land/info/" + adId + params).then((res) => {
      let data = res.data.data;
      chapters.value = data.chapters
      imgUrl.value = data.img
      novelId.value = data.novelId
      deepLink.value = data.deepLink
    })

    function toDeepLink() {
      location.href = deepLink.value
    }

    return {chapters, imgUrl, deepLink, toDeepLink,novelId};
  },
});


</script>
<style>
.bgm {
  background-image: url(/@/assets/images/bg.png);
}
</style>